<template>
  <div class="myAddress">
      <x-header title="选择地址" :left-options="{backText:''}" class='whiteHeader'>
        <span slot='right' class="eidtclass" @click='editAddress'>管理</span>
      </x-header>
      <div class="allAdress">
        <div class="addressList" v-for="item in allAddress">
          <div class="allMess">
            
            <div class="addressMess">
                <p>
                {{item.CONTACT}} <span>{{item.PHONE}}</span>
              </p>
              <h2>{{item.PROVINCE}}{{item.CITY}}{{item.RANGE}}{{item.ADDRESS}}</h2>
            </div>
          </div>
          <div class="operate">
              <div class="select" @click="selectAddress(item)" :class="{'on':item.ADR_ID==selectId}"></div>
          </div>
        </div>
        
      </div>
      <a class="addAddress" href="javascript:;" @click='addAddress'>
         <img src="../../assets/image/address/add.png">
        新增地址
      </a>
  </div>
</template>
<script>
/*选择地址*/
import {MessageBox} from 'mint-ui';
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"myAddress",
  // 数据
  data(){

    return{
      selectId:"",//选中的地址
      userId:"",
      allAddress:""   //用户所有地址
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    //请求实例
    this.userId=getCookie('loginkey')
    //获取用户添加的所有地址
    this.$fetchPost('/UserAdrWeb/getUserAdrList.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allAddress=res.RESULT_DATA;
        }
      },err=>{
        console.log(err);
    })
    if(sessionStorage.getItem('selectAddress')){
      this.selectId=JSON.parse(sessionStorage.getItem('selectAddress')).ADR_ID;
    }
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    //返回
      returnLink(){
        this.$router.go(-1);
      },
      // 选择地址(设置默认地址)
      selectAddress(item){
        this.selectId=item.ADR_ID;
        sessionStorage.setItem('selectAddress',JSON.stringify(item));
        this.$router.go(-1);
      },
      //添加地址
      addAddress(){
        localStorage.removeItem('addressMess');
        this.$router.push('/updateAddress');
      },
      //编辑收货地址
      editAddress(){
        this.$router.push('/address');
      }
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.myAddress{
  width: 7.5rem;
  min-height: 100%;
  background: #efeff4;
  .commentHeader{
    background: #fff;
    color: #000;
    border-bottom: 1px solid #d9d9d9;
    font-size: 0.361111rem;
  }
  .eidtclass{
    font-size: 0.28rem;
    color: #333;
  }
  .allAdress{
    
    .addressList{
      background: #fff;
      margin-bottom: 0.2rem;
      text-align: left;
      border-bottom: 0.05rem solid #ededed;
      display: flex;
      .border-bottom{
          position: relative;
          border-top: none !important;
      }
      .border-bottom::after {
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #e0e0e0;
          -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
      }
      .allMess{
        display: flex;
        width: 80%;
        /* border-bottom: 1px solid #e1e1e1; */
        padding:0.15rem;
        .addressMess{
          padding: 0 0 0 0.2rem;
          width: 100%;
          h2{
            font-size: 0.22rem;
            margin: 0.1rem 0;
            color: #686868;
            margin-bottom: 0.2rem;
          }
          p{
            font-size: 0.25rem;
            font-weight: bold;
            color: #000;
            margin: 0.1rem 0 0.277778rem 0;
            span{
              float: right;
              padding-right: 0.3rem;
            }
          }
          
        }
      }
      .operate{
        padding:0rem 0.2rem;
        width: 20%;
        .select{
          width: 0.42rem;
          height:0.4rem;
          margin: 0.55rem auto;
          padding: 0.15rem;
          background: url(../../assets/image/address/noChecked.png) center center no-repeat;
          background-size: 0.42rem 0.4rem;
        }
        .on{
          background: url(../../assets/image/address/checked.png) center center no-repeat;
          background-size: 0.42rem 0.4rem;
        }
      }
    }
    
  }
  .addAddress{
    position:fixed;
    bottom:0;
    width: 100%;
    display: block;
    height:0.8rem;
    line-height: 0.8rem;
    font-size: 0.305556rem;
    text-align: center;
    background: red;
    color: #fff;
    img{
      width: 0.31rem;
      height: 0.31rem;
      margin-top: 0.25rem;
      margin-right: 0.1rem;
    }
  }
}
</style>